<main class="warehouse-goods-bom">
    <nz-table #groupingTable nzBordered [nzData]="bomList" [nzShowPagination]="false" nzSize="middle">
        <thead>
            <tr>
                <th rowspan="3" nzAlign="center" class="th-num">序号</th>
                <th rowspan="3" nzAlign="center">商品编号</th>
                <th rowspan="3" nzAlign="center">商品69码</th>
                <th rowspan="3" nzAlign="center">商品名称</th>
                <th rowspan="3" nzAlign="center">规格</th>
                <th rowspan="3" nzAlign="center">良品库存</th>
                <th rowspan="3" nzAlign="center">不良品库存</th>
                <th rowspan="3" nzAlign="center">数量</th>
                <th rowspan="4" nzAlign="center">操作</th>
            </tr>
        </thead>
        <tbody>
            <ng-container *ngFor="let item of bomList; let i=index">
                <tr>
                    <!-- 序号 -->
                    <td nzAlign="center">{{i + 1}}</td>
                    <!-- 商品编号 -->
                    <td nzAlign="center">{{item.id}}</td>
                    <!-- 商品69码 -->
                    <td nzAlign="center">{{item.code || '-'}}</td>
                    <!-- 商品名称 -->
                    <td nzAlign="center"> {{item.name || '-'}}</td>
                    <!-- 规格 -->
                    <td nzAlign="center">{{ item.attr || '-'}}</td>
                    <!-- 良品库存 -->
                    <td nzAlign="center">{{ item.stock || '-'}}</td>
                    <!-- 不良品库存 -->
                    <td nzAlign="center">{{ item.badStock || '-'}}</td>
                    <!-- 数量 -->
                    <td nzAlign="center">
                        <div class="domBox">
                            <nz-input-number [nzId]="'goodsBomID' + i" [(ngModel)]="item.number" [nzMin]="1"
                                [nzMax]="9999" (nzBlur)="onBlurCountNum()" nzPlaceHolder="请输入"
                                (keydown)="onKeydownEnter($event, i)">
                            </nz-input-number>
                        </div>
                    </td>
                    <!-- 操作 -->
                    <td nzAlign="center">
                        <a nz-popconfirm nz-button nzType="link" nzDanger nzPopconfirmTitle="确认删除该商品？"
                            (nzOnConfirm)="onDelete(item, i)">删除</a>
                    </td>
                </tr>
            </ng-container>
            <ng-container>
                <tr *ngIf="bomList?.length > 0">
                    <td nzAlign="center">合计</td>
                    <td nzAlign="center" colSpan="6"></td>
                    <td nzAlign="center">{{cecheData.countTotal}}</td>
                    <td nzAlign="center"></td>
                </tr>
            </ng-container>
        </tbody>
    </nz-table>
    <button nz-button (click)="onAddGoods()" class="products">+ 添加</button>
    <div class="submit-box">
        <nz-divider></nz-divider>
        <div class="bt-box">
            <button nz-button nzType="primary" (click)="onSave()">保存</button>
            <app-bt-group [btType]="'default'" [btText]="'返回'"></app-bt-group>
        </div>
    </div>
</main>


<nz-modal [(nzVisible)]="isVisible" nzTitle="选择采购商品" (nzOnCancel)="onModalClose()" [nzStyle]="{ width: '1600px' }"
    [nzFooter]="null" class="modal-view">
    <ng-container *nzModalContent>
        <header class="query-box">
            <!-- 商品 -->
            <nz-form-item>
                <nz-form-label>商品</nz-form-label>
                <input nz-input placeholder="69码、商品编码、名称" [(ngModel)]="modalQueryForm.whGood">
            </nz-form-item>
            <button nz-button nzType="primary" (click)="onModalQuery()">查询</button>
            <button nz-button nzType="primary"
                (click)="onModalRelationGoods()">关联已选商品（{{selectCheckGoodsList?.length}}）</button>
        </header>
    
        <nz-table #rowSelectionTable nzShowSizeChanger [nzData]="modalTableData?.records" [nzShowPagination]="false"
            [nzPageSize]="modalTableData?.size" nzBordered>
            <thead>
                <tr>
                    <th [(nzChecked)]="checked" (nzCheckedChange)="onModalAllChecked($event)"></th>
                    <th nzAlign="center">商品编号</th>
                    <th nzAlign="center">商品名称</th>
                    <th nzAlign="center">商品规格</th>
                    <th nzAlign="center">69码</th>
                    <th nzAlign="center">实际库存</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let item of rowSelectionTable.data">
                    <td nzAlign="center" [nzChecked]="item.checked" (nzCheckedChange)="onModalItemChecked(item, $event)">
                    </td>
                    <td nzAlign="center">{{ item.id }}</td>
                    <td nzAlign="center">{{ item.name }}</td>
                    <td nzAlign="center">{{ item.attr }}</td>
                    <td nzAlign="center">{{ item.code }}</td>
                    <td nzAlign="center">{{ item.stock }}</td>
                </tr>
            </tbody>
        </nz-table>
        <div class="pagination-box">
            <div class="pagination-template">
                <ng-template #totalTemplate let-total> 共有 {{ total }} 条 </ng-template>
                <nz-pagination [nzPageSizeOptions]="[10, 20, 50, 100]" nzShowSizeChanger nzShowQuickJumper [nzPageIndex]="1"
                    [nzTotal]="modalTableData?.total" [nzPageSize]="modalQueryForm.pageSize"
                    [nzPageIndex]="modalQueryForm.page" (nzPageIndexChange)="onModalPageIndexChange($event)"
                    (nzPageSizeChange)="onModalPageSizeChange($event)">
                </nz-pagination>
            </div>
        </div>
    </ng-container>
</nz-modal>